<template>
  <div>
    <p> {{ count }}</p>
    <button @click="stopClick">停止监听</button>
  </div>
</template>

<script>
import {ref, watchEffect} from 'vue'

export default {
  name: "WatchPage",
  setup() {
    const count = ref(0);

    const stop = watchEffect((onInvalidate) => {

      console.log(count.value)
      onInvalidate(() => {
        console.log("watchEffect中执行之后或者stop之后")
      })
    })

   const  interval = setInterval(() => {
      count.value += 1
    }, 1000)


    const stopClick = () => {
      console.log('停止监听，不在打印count的值')
      stop();
      clearInterval(interval)
    }
    return {
      count,
      stopClick
    }
  }
}
</script>

<style scoped>

</style>
